<template>
  <div class="app">
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="float:right;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">供应商管理</el-breadcrumb-item>

      <el-breadcrumb-item>配送中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-button @click="export2Excel">导出excel</el-button> -->
    <el-dialog
      style="width:1300px;text-align:center;"
      title="新增供应商"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form1" :rules="rules" ref="form1" label-width="120px" style="height:310px">
        <!-- 左区域 -->
        <div class="dialog-left" style="float-left:left;width:45%;margin-left:-10px;">
          <el-form-item label="供应商名称" style="margin-top:10px;" prop="supplierName">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.supplierName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" style="margin-top:10px;" prop="address">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" style="margin-top:10px;" prop="contactPerson">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.contactPerson"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" style="margin-top:10px;" prop="phone">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行" style="margin-top:10px;" prop="accountBank">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.accountBank"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 右区域 -->
        <div class="dialog-right" style="float:right;width:45%;margin-right:60px;margin-top:-300px">
          <el-form-item label="银行账号" style="margin-top:10px;" prop="bankNumber">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.bankNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="传真" style="margin-top:10px;" prop="fax">
            <el-input class="el-input" style="width:180px;" v-model="form1.fax" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮编" style="margin-top:10px;" prop="postcode">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.postcode"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人" style="margin-top:10px;" prop="legalPerson">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.legalPerson"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" style="margin-top:10px;" prop="remark">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form1.remark"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn2" @click="dialogFormVisible = false">取 消</el-button>
        <el-button class="btn3" type="primary" @click="dialogFormVisible = false;submit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <el-input class="input" style="width:150px;" placeholder="请输入内容" v-model="id" clearable></el-input>
    <el-button @click="chaxun" class="btn1" type="primary" plain>查询</el-button>-->
    <el-input
      placeholder="请输入供应商名称"
      style="margin-top:30px;"
      v-model="form.name"
      clearable
      @clear="getSupplier1"
    ></el-input>
    <el-button
      class="btn1"
      slot="append"
      @click="getSupplier"
      type="primary"
      plain
      icon="el-icon-search"
      style=" background-color: rgb(32,178,170);color:white;margin-top:30px;"
    >搜索</el-button>
    <el-divider></el-divider>
    <el-input
      class="input"
      style="width:150px;"
      placeholder="请输入id"
      v-model="form4.id"
      clearable
      @clear="getSupplier1"
    ></el-input>
    <el-button
      @click="deleteSupplier()"
      class="btn1"
      type="primary"
      plain
      style=" background-color: rgb(32,178,170);color:white;"
    >删除供应商</el-button>
    <el-button
      @click="dialogFormVisible = true"
      class="btn1"
      type="primary"
      plain
      style=" background-color: rgb(32,178,170);color:white;"
    >新增供应商</el-button>
    <!-- 更改供应商 -->
    <!-- <el-dialog
      style="width:1200px;text-align:center;"
      title="更改供应商"
      :visible.sync="dialogFormVisible1">
      <el-form :model="form4">
        <el-form-item label="供应商编号" :label-width="formLabelWidth">
          <el-input class="el-input"  v-model="form4.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.supplierName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.contactPerson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开户行" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.accountBank" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.bankNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="传真" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.fax" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮编" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.postcode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.legalPerson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input class="el-input" v-model="form4.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn2" @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          class="btn2"
          type="primary"
          @click="dialogFormVisible1 = false;updateSupplier('form4')"
        >确 定</el-button>
      </div>
    </el-dialog>-->

    <el-dialog
      style="width:1300px;text-align:center;margin-top:-20px;"
      title="修改供应商"
      :visible.sync="dialogFormVisible1"
    >
      <el-form :model="form4" :rules="rules" ref="form4" label-width="120px" style="height:370px">
        <!-- 左区域 -->
        <el-form-item
          label="供应商编号"
          style="margin-top:10px;margin-left:-10px;"
          :label-width="formLabelWidth"
        >
          <el-input
            class="el-input"
            style="width:460px;padding-left:-10px;"
            v-model="form4.id"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <div class="dialog-left" style="float-left:left;width:45%;margin-left:-10px;">
          <el-form-item label="供应商名称" style="margin-top:10px;" prop="supplierName">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.supplierName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" style="margin-top:10px;" prop="address">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" style="margin-top:10px;" prop="contactPerson">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.contactPerson"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" style="margin-top:10px;" prop="phone">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行" style="margin-top:10px;" prop="accountBank">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.accountBank"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 右区域 -->
        <div
          class="dialog-right"
          style="float:right;width:45%;margin-right:60px;margin-top:-300px;"
        >
          <el-form-item label="银行账号" style="margin-top:10px;" prop="bankNumber">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.bankNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="传真" style="margin-top:10px;" prop="fax">
            <el-input class="el-input" style="width:180px;" v-model="form4.fax" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮编" style="margin-top:10px;" prop="postcode">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.postcode"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人" style="margin-top:10px;" prop="legalPerson">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.legalPerson"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" style="margin-top:10px;" prop="remark">
            <el-input
              class="el-input"
              style="width:180px;"
              v-model="form4.remark"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn2" @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          class="btn3"
          type="primary"
          @click="dialogFormVisible1 = false;updateSupplier('form4')"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      ref="filterTable"
      :data="form3"
      style="width: 100%;"
      max-height="450"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="#" type="index" fixed></el-table-column>
      <el-table-column
        prop="id"
        label="供应商编号"
        sortable
        width="140"
        column-key="id"
        :filters="[{text: '01', value: '01'}, {text: '02', value: '02'}, {text: '03', value:'03'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '05', value: '05'}, {text: '06', value: '06'}]"
      ></el-table-column>
      <el-table-column prop="supplierName" label="供应商名称" width="150"></el-table-column>
      <el-table-column prop="address" label="地址" width="200"></el-table-column>
      <el-table-column prop="contactPerson" label="联系人" width="150"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
      <el-table-column prop="accountBank" label="开户行" width="150"></el-table-column>
      <el-table-column prop="bankNumber" label="银行账号" width="180" style="text-align:center;"></el-table-column>
      <el-table-column prop="fax" label="传真" width="150"></el-table-column>
      <el-table-column prop="postcode" label="邮编" width="150"></el-table-column>
      <el-table-column prop="legalPerson" label="法人" width="150"></el-table-column>
      <el-table-column prop="remark" label="备注" width="150"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="160"></el-table-column>
      <el-table-column label="操作" width="180px;" fixed="right">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <el-button
              class="btn4"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <el-button
              class="btn4"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[4, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      pageSize:4,
      pageNum:1,
      loading: true,
      total: 0,
      queryInfo: {
        query: "",
        type: 3,
        pageNum: 1,
        pageSize: 2,
      },
      fruits: [],
      input: "",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        name: "",
        region: "",
        // date1: '',
        // date2: '',
        // delivery: false,
        // type: [],
        // resource: '',
        // desc: ''
      },
      formLabelWidth: "120px",
      form1: {
        
        accountBank: "",
        address: "",
        bankNumber: "",
        contactPerson: "",
        createTime: "",
        fax: "",
        legalPerson: "",
        phone: "",
        postcode: "",
        remark: "",
        supplierName: "",
        updateTime: "",
      },
      rules:{
         
        accountBank: [
            { required: true, message: '请输入开户行', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
         ],
        address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
         ],
        bankNumber: [
            { required: true, message: '请输入银行账户', trigger: 'blur' },
            { min: 19, max: 19, message: '如6228481466075078479', trigger: 'blur' }
         ],
        contactPerson: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
         ],   
        fax: [
            { required: true, message: '请输入传真', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
         ],
        legalPerson: [
            { required: true, message: '请输入法人', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
         ],
        phone: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { min: 11, max: 11, message: '如15017696696', trigger: 'blur' }
         ],
        postcode: [
            { required: true, message: '请输入邮编', trigger: 'blur' },
            { min: 6, max: 6, message: '如528231', trigger: 'blur' }
         ],
        remark: [
            { required: true, message: '请输入备注', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
         ],
        supplierName: [
            { required: true, message: '请输入供应商名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
         ]      
      },
      form3: [],
      form4: {
        accountBank: "",
        address: "",
        bankNumber: "",
        contactPerson: "",
        fax: "",
        id: "",
        legalPerson: "",
        phone: "",
        postcode: "",
        remark: "",
        supplierName: "",
      },
      delid: "",
      name: "",
      id: "",
    };
  },
  methods: {
    // 添加供应商 ,修改过
    async submit() {
      
      const { data: res } = await this.$http.post("/api/send/addSupplier", {
        accountBank: this.form1.accountBank,
        address: this.form1.address,
        bankNumber: this.form1.bankNumber,
        contactPerson: this.form1.contactPerson,
        fax: this.form1.fax,
        legalPerson: this.form1.legalPerson,
        phone: this.form1.phone,
        postcode: this.form1.postcode,
        remark: this.form1.remark,
        supplierName: this.form1.supplierName,
      });
      if (res.code == 200) {
        this.form3.push({
        accountBank: this.form1.accountBank,
        address: this.form1.address,
        bankNumber: this.form1.bankNumber,
        contactPerson: this.form1.contactPerson,
        fax: this.form1.fax,
        legalPerson: this.form1.legalPerson,
        phone: this.form1.phone,
        postcode: this.form1.postcode,
        remark: this.form1.remark,
        supplierName: this.form1.supplierName,
      });
        this.$message({
          message: '恭喜你，成功添加供应商',
          type: 'success'
        })
        console.log(res.data);
        this.getSupplier1();
      } else {
        return this.$message.error(res.msg);
      }
    },
    // 删除供应商
    async deleteSupplier() {
      // this.$confirm("此操作将删除该供应商, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.$message({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
      const { data: res } = await this.$http.get("/api/send/deleteSupplier", {
        params: {
          id: this.form4.id,
        },
      });
      if(res.code == 200){
      console.log("删除供应商");
      console.log(res);
      this.getSupplier1()
      }else{
        return this.$message.error(res.msg)
      }
    },

    // 修改供应商,修改过
    async updateSupplier(forName) {
      const { data: res } = await this.$http.post("/api/send/updateSupplier", {
        accountBank: this.form4.accountBank,
        address: this.form4.address,
        bankNumber: this.form4.bankNumber,
        contactPerson: this.form4.contactPerson,
        id: this.form4.id,
        fax: this.form4.fax,
        legalPerson: this.form4.legalPerson,
        phone: this.form4.phone,
        postcode: this.form4.postcode,
        remark: this.form4.remark,
        supplierName: this.form4.supplierName,
      });
      if (res.code == 200) {
          this.$set(this.form3, this.form4.index, {
        accountBank: this.form4.accountBank,
        address: this.form4.address,
        bankNumber: this.form4.bankNumber,
        contactPerson: this.form4.contactPerson,
        fax: this.form4.fax,
        legalPerson: this.form4.legalPerson,
        phone: this.form4.phone,
        id: this.form4.id,
        postcode: this.form4.postcode,
        remark: this.form4.remark,
        supplierName: this.form4.supplierName,
        updateTime: this.form3.updateTime,
        createTime: this.form3.createTime,
      });
        console.log("更改供应商");
        this.$message({
          message: '恭喜你，成功修改供应商',
          type: 'success'
        })
        console.log(res);
        this.dialogFormVisible1 = false;
        console.log(forName);
        this.getSupplier1();
      } else {
        return this.$message.error(res.msg);
      }
    },
    //通过id供应商，查询
    async chaxun() {
      await this.$http
        .get("/api/send/getSupplierById", {
          params: {
            id: this.id,
          },
        })
        .then((response) => {
          console.log("查询");
          console.log(response);
          let form3 = response.data.data;
          console.log(form3);
          console.log("成功2");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("id");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    // formatter(row, column) {
    //   return row.address;
    // },
    // filterTag(value, row) {
    //   return row.tag === value;
    // },
    // filterHandler(value, row, column) {
    //   const property = column['property'];
    //   return row[property] === value;
    // },
    handleEdit(index, row) {
      this.dialogFormVisible1 = true;
      this.form4 = Object.assign({}, row);
      this.form4.index = index;
    },
     handleDelete(row) {
      this.$confirm("此操作将删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          const { data: res } =  this.$http.get(
             `/api/send/deleteSupplier?id=${row.id}`);
             console.log(res);
          // if(res.code === 200){
          //   console.log("删除供应商");
          // // this.getSupplier1() 
          //   }else{
          //     return this.$message.error(res.msg)
          //   }
            this.$message({
            type: 'success',
            message: '删除成功!'
            });
            this.getSupplier1() 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    this.getSupplier1() 
      
    },
    /* 设置分页效果下的方法 */
    /* 页面大小的改变触发的方法 */
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getSupplier1();
    },
    /* 页面数发送改变的时候 */
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getSupplier1();
    },  
    //分页显示供应商
    async getSupplier() {
      if(this.form.name == ""){
        return this.$message.error("查询条件不能为空")
      }else{
        this.loading = true
        const { data: res } = await this.$http.get('/api/send/getSupplier?pageNum='+this.pageNum+'&pageSize='+this.pageSize, {
        params: {
          name: this.form.name,
        },
      });
      // if(res.meta.status !== 200) {
      //   return this.$message.error("获取供应商数据失败")
      // }
      if(res.code == 200){
      this.form3 = res.data;
      this.total = res.total;
      console.log("d");
      console.log(res);
      console.log(this.total);
      this.loading = false
      }else{
        return this.$message.error(res.msg)
      }
      }
      
    },
    async getSupplier1() {
      //分页显示供应商
      this.loading = true;
      const { data: res } = await this.$http.get('/api/send/getSupplier?pageNum='+this.pageNum+'&pageSize='+this.pageSize);
      // if(res.meta.status !== 200) {
      //   return this.$message.error("获取供应商数据失败")
      // }
      if (res.code == 200) {
        this.form3 = res.data;
        this.total = res.total;
        console.log("d");
        console.log(res);
        console.log(this.total);
        this.loading = false;
      }
    },
    //导出excel
    // export2Excel() {
    //   require.ensure([], () => {
    //     const { export_json_to_excel } = require('../../vendor/Export2Excel')
    //     const tHeader = ['序号', '帐号', '院校']
    //     const filterVal = ['index', 'phone_Num', 'school_Name']
    //     const list = this.tableData
    //     const data = this.formatJson(filterVal, list)
    //     export_json_to_excel(tHeader, data, '列表excel')
    //   })
    // },
    // formatJson(filterVal, jsonData) {
    //   return jsonData.map(v => filterVal.map(j => v[j]))
    // }
  },
  created() {
    this.getSupplier1();
  },
};
</script>

<style scoped>
* {
  margin: 0 auto;
  padding: 0px;
}
.app {
  background-color: whitesmoke;
}
.input,
.el-input {
  width: 200px;
  background-color: blue;
}
.btn1 {
  /* display: inline-block; */
  /* padding: 15px 25px; */
  font-size: 15px;
  border-radius: 5px;
  /* cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4caf50;
  border: none;
  border-radius: 25px;
  box-shadow: 0px 0px 20px 0px #999;
  margin-bottom: 10px; */
  color: white;
  background-color: rgb(19, 206, 102);
  padding: 10px;
}

/* .btn1:hover {
  background-color: rgb(19, 206, 102);
}

.btn1:active {
  background-color: rgb(19, 206, 102);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
} */

.btn2 {
  text-align: center;
  width: 80px;
  height: 40px;
  /* margin-top: 20px;*/
  margin-left: -20px;
}
.btn3 {
  text-align: center;
  width: 80px;
  height: 40px;
  /* margin-top: -40px; */
  padding: 10px;
  float: right;
  margin-right: 210px;
}
.form {
  margin-top: 10px;
}
.el-input {
  margin-top: 10px;
  width: 400px;
}

.btn4 {
  padding: 10px;
}
</style>